<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.5.22/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
</head>
<body>
	<div id="app">
	hello {{name}}
	
		<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
  
  <p></p>
  	用户名：<input v-model="loginParam.username"/>
  	密码：<input v-model="loginParam.pass" type="pass"/>
  	<button @click="login">登陆</button>
  	 <button @click="logout">退出登陆</button>
	</div>
</body>
<script>
//添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log(config);
    config.headers.token = localStorage.getItem("token");
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
new Vue({
    el: '#app',
    data: function() {
    	return {
    		loginParam:{
    			username:'',
    			pass:''
    		},
    		name: "yinjihuan",
    		 tableData: [{
    	            date: '2016-05-02',
    	            name: '王小虎',
    	            address: '上海市普陀区金沙江路 1518 弄'
    	          }, {
    	            date: '2016-05-04',
    	            name: '王小虎',
    	            address: '上海市普陀区金沙江路 1517 弄'
    	          }, {
    	            date: '2016-05-01',
    	            name: '王小虎',
    	            address: '上海市普陀区金沙江路 1519 弄'
    	          }, {
    	            date: '2016-05-03',
    	            name: '王小虎',
    	            address: '上海市普陀区金沙江路 1516 弄'
    	    }]
    	}
    },
    mounted:function(){
    	var that = this;
    	axios.get('http://192.168.31.244:2011/monkey-article-service/article/get', {
    	    params: {
    	      id: "5cb87ca3b42b013a567f8fea"
    	    }
    	  })
    	  .then(function (response) {
    	    console.log(response.data.data.title);
    	    that.name=response.data.data.title;
    	  })
    	  .catch(function (error) {
    	    console.log(error);
    	  });
    },methods:{
    	login:function(){
    		var that = this;
    		axios.post('http://192.168.31.244:2011/user-service/user/login', that.loginParam)
    		  .then(function (response) {
    		    if(response.data.code == 200){
    		    	console.log(response.data)
    		    	var token = response.data.data.token;
    		    	alert(token);
    		    	localStorage.setItem("token", token);
    		    } else {
    		    	alert(response.data.message);
    		    }
    		  })
    		  .catch(function (error) {
    		    console.log(error);
    		  });
    	},
    	logout:function(){
    		var that = this;
    		axios.post('http://192.168.31.244:2011/user-service/user/logout', {})
    		  .then(function (response) {
    		    if(response.data.code == 200){
    		    	localStorage.removeItem("token");
    		    } else {
    		    	alert(response.data.message);
    		    }
    		  })
    		  .catch(function (error) {
    		    console.log(error);
    		  });
    	}
    }
})
</script>
</html>